<template>
	<div>
		<div :style="{ padding: '8px' }">
			<Row :gutter="10" :style="{ marginBottom: '8px' }">
				<!-- 学科下拉选择框 -->
				<i-Col :span="8">
					<Tag type="dot" color="blue">学科</Tag>
					<i-Select
						v-model="subjectIDSearch"
						clearable
						@on-change="questionAxios"
						:style="{ width: '70%' }"
					>
						<i-Option v-for="item in subjectDow" :value="item.id" :key="item.id">
							{{ item.subjectName }}
						</i-Option>
					</i-Select>
				</i-Col>
				<!-- 难度下拉选择框 -->
				<i-Col :span="8">
					<Tag type="dot" color="blue">难度</Tag>
					<i-Select
						v-model="difficultySearch"
						clearable
						@on-change="questionAxios"
						:style="{ width: '70%' }"
					>
						<i-Option
							v-for="item in difficulty"
							:value="item.label"
							:key="item.value"
						>
							{{ item.label }}
						</i-Option>
					</i-Select>
				</i-Col>
				<!-- 题型下拉选择框 -->
				<i-Col :span="8">
					<Tag type="dot" color="blue">题型</Tag>
					<i-Select
						v-model="questionTypeSearch"
						clearable
						@on-change="questionAxios"
						:style="{ width: '70%' }"
					>
						<i-Option
							v-for="item in questionType"
							:value="item.label"
							:key="item.value"
						>
							{{ item.label }}
						</i-Option>
					</i-Select>
				</i-Col>
			</Row>
			<Row :gutter="10">
				<i-Col :span="8">
					<Tag type="dot" color="blue">题干</Tag>
					<Input
						:style="{ width: '70%' }"
						v-model="keywordSearch"
						placeholder="请输入题干进行搜索"
						serach
					/>
				</i-Col>
				<i-Col :span="8" class="btn-group">
					<Button type="primary" @click="questionAxios">搜索</Button>
					<Button type="info" @click="searchClear">重置</Button>
				</i-Col>
				<i-Col :span="2" :push="6">
					<Button @click="newQuestion">新增试题</Button>
				</i-Col>
			</Row>
		</div>

		<!-- <Row justify="end" type="flex">
			
		</Row> -->
		<Table border :columns="columns1" :data="computeTikuList">
			<template slot-scope="{ row }" slot="title">
				<div class="ellipsis" v-html="row.question"></div>
			</template>
			<template slot="addDate" slot-scope="{ row }">
				{{ row.addDate | dateFormat }}
			</template>
			<template slot="chkState" slot-scope="{ row }">
				<Tag :color="row.chk.chkColor">
					{{ row.chk.chkName }}
				</Tag>
			</template>
			<template slot="footer">
				<!-- 分页 -->
				<Page
					class="fr"
					:total="pageInfo.count"
					:page-size-opts="pageInfo.pageSizeArr"
					:current="pageInfo.page"
					:page-size="pageInfo.defaultPageSize"
					show-sizer
					show-total
					@on-change="handleCurrentChange"
					@on-page-size-change="handleSizeChange"
				/>
			</template>
		</Table>

		<!-- 确认删除显示框 -->
		<Modal v-model="modal1" title="删除文章列表" @on-ok="ok" @on-cancel="cancel">
			<h3>即将删除当前题库列表，是否确认？</h3>
		</Modal>
		<!-- 题目预览对话框 -->
		<Modal
			v-model="topicPreview"
			title="题目预览"
			@on-ok="clearPre"
			@on-cancel="clearPre"
			:styles="{ top: '30px', right: '-70px' }"
			width="800px"
			class="row"
		>
			<Row>
				<i-Col span="16">题库 ：面试宝典题库</i-Col>
				<i-Col span="8">
					审核状态：
					<Tag :color="questionInfo.chkColor">
						{{ questionInfo.chkName }}
					</Tag>
				</i-Col>
			</Row>
			<Row>
				<i-Col span="8">编号 ：{{ questionInfo.number }}</i-Col>
				<i-Col span="8">学科 ：{{ questionInfo.subjectName }}</i-Col>
				<i-Col span="8">题型 ：{{ questionInfo.questionType }}</i-Col>
			</Row>
			<Row>
				<i-Col span="8">方向 ：{{ questionInfo.direction }}</i-Col>
				<i-Col span="8">难度 ：{{ questionInfo.difficulty }}</i-Col>
				<i-Col span="8">城市 ：{{ questionInfo.province }}</i-Col>
			</Row>
			<Layout>
				<Content>
					<h3>题干 ：</h3>
					<div v-html="questionInfo.question" id="question"></div>
					<br />
					<template v-if="questionInfo.options != false">
						<p>选项：</p>
						<p
							v-for="(item, index) in questionInfo.options"
							:key="index"
							style="margin-bottom:5px;"
						>
							<span>{{ String.fromCharCode(index + 65) }}：</span>
							<span>{{ item.title }}</span>
						</p>
					</template>
				</Content>
				<Content>
					<div v-show="answerPre">
						<h4>答案解析 ：</h4>
						<div v-html="questionInfo.answer" id="question"></div>
					</div>

					<br />
					<h4>题目备注 ：</h4>
					<div v-html="questionInfo.remarks" id="question"></div>
				</Content>
			</Layout>
		</Modal>
		<!-- 试题审核对话框 -->
		<Modal v-model="isChk" title="试题审核" @on-visible-change="modalChange">
			<i-Form ref="chkFormRef" :model="chkForm" :rules="chkFormRules">
				<FormItem label="审核状态：" prop="chkState">
					<RadioGroup v-model="chkForm.chkState" @on-change="write">
						<Radio :label="1">通过</Radio>
						<Radio :label="2">未通过</Radio>
					</RadioGroup>
				</FormItem>
				<FormItem label="审核意见：" prop="chkRemarks">
					<Input
						v-model="chkForm.chkRemarks"
						type="textarea"
						:autosize="{ minRows: 2, maxRows: 5 }"
					/>
				</FormItem>
			</i-Form>
			<div slot="footer">
				<Button type="text" size="large" @click="cancelChk">取消</Button>
				<Button type="primary" size="large" @click="subChk">确定</Button>
			</div>
		</Modal>
	</div>
</template>
<script>
import { questionType, difficulty } from './constants.js'
import { mapState, mapMutations } from 'vuex'
export default {
	data() {
		return {
			columns1: [
				{
					title: '序号',
					type: 'index',
					width: '70px',
					align: 'center',
					fixed: 'left'
				},
				{ title: '学科', key: 'subject', width: '100px', align: 'center' },
				{ title: '题型', key: 'questionType', width: '70px' },
				{ title: '难度', key: 'difficulty', align: 'center', width: '70px' },
				{ title: '题干', slot: 'title', width: '350px' },
				{ title: '录入时间', slot: 'addDate', width: '150px' },
				{ title: '方向', key: 'direction', width: '100px', align: 'center' },
				{ title: '审核状态', slot: 'chkState', width: '100px' },
				{ title: '录入人', key: 'creator', width: '100px' },
				{
					title: '操作',
					width: '200px',
					fixed: 'right',
					render: (h, params) => {
						return h('ButtonGroup', [
							h(
								'Button',
								{
									props: {
										type: 'info',
										ghost: 'ghost',
										size: 'small'
									},
									on: {
										click: () => {
											// console.log(params.row.id)
											this.preview(params.row.id, params.index)
										}
									}
								},
								'预览'
							),
							h(
								'Button',
								{
									props: {
										type: 'primary',
										ghost: 'ghost',
										size: 'small'
									},
									on: {
										click: () => {
											this.isChk = true
											// console.log(params.row)
											Object.keys(this.chkForm).forEach(val => {
												if (params.row.hasOwnProperty(val)) {
													this.chkForm[val] = params.row[val]
												}
											})
											if (this.chkForm.chkState === 0) this.chkForm.chkState = 1
											console.log(this.chkForm)
										}
									}
								},
								'审核'
							),
							h(
								'Button',
								{
									props: {
										type: 'warning',
										ghost: 'ghost',
										size: 'small'
									},
									on: {
										click: () => {
											// this.$router.push(`/questions/add/${params.row.id}`)
											this.questionID(params.row.id)
											this.$router.push({ name: 'questionsAdd' })
										}
									}
								},

								'修改'
							),
							h(
								'Button',
								{
									props: {
										type: 'error',
										ghost: 'ghost',
										size: 'small'
									},
									on: {
										click: () => {
											// 打开确认删除框
											this.modal1 = true
											// 存储当前列表的id
											this.delId = params.row.id
										}
									}
								},
								'删除'
							)
						])
					}
				}
			],
			total: 0,
			// 分页数据配置
			keywordSearch: '',
			subjectIDSearch: '',
			difficultySearch: '',
			questionTypeSearch: '',
			// 获取的基础题库数据
			tikuList: [],
			// 控制确认删除对话框的显示隐藏
			modal1: false,
			// 存储删除列表的id
			delId: 0,
			// 储存当前页面学科下拉框的数据
			subjectDow: [],
			// 试题难度
			difficulty,
			// 题型
			questionType,
			// 试题预览对话框
			topicPreview: false,
			// 获取题目预览的参数对象
			questionInfo: {},
			// 查看答案
			answerPre: true,
			isChk: false,
			// 试题审核表单
			chkForm: {
				id: '',
				chkRemarks: '',
				chkState: 1
			},
			// 审核试题的验证规则
			chkFormRules: {
				chkState: [
					{
						required: true,
						type: 'number',
						message: '请选择审核状态',
						trigger: 'change'
					}
				],
				chkRemarks: [{ required: true, message: '请填写审核意见', trigger: 'blur' }]
			}
		}
	},
	computed: {
		...mapState(['notification']),

		// 审核状态对应计算数组
		computeTikuList() {
			const arr = this.tikuList.map(obj => {
				const chk = {
					0: { chkName: '未审核', chkColor: 'orange' },
					1: { chkName: '通过', chkColor: 'green' },
					2: { chkName: '未通过', chkColor: 'red' }
				}
				obj.chk = chk[obj.chkState]

				return obj
			})
			return arr
		}
	},
	created() {
		this.questionList()
		// 选择器数据获取
		this.listParams()
	},
	methods: {
		...mapMutations(['questionID']),
		newQuestion() {
			console.log('新增')
			this.questionID('')
			this.$router.push({ name: 'questionsAdd' })
		},
		searchClear() {
			// 重置所有级联选择器
			this.keywordSearch = ''
			this.subjectIDSearch = ''
			this.difficultySearch = ''
			this.questionTypeSearch = ''
			this.questionList()
		},
		// 获取学科列表所有数据
		async listParams() {
			const res = await this.$http.simpleSub()

			this.subjectDow = res
			// console.log(this.subjectDow)
		},
		// 分页列表数据获取
		async questionList() {
			const { data: res } = await this.$http.questiAxios(
				this.getQueryParams({
					keyword: this.keywordSearch,
					subjectID: this.subjectIDSearch,
					difficulty: this.difficultySearch,
					questionType: this.questionTypeSearch
				})
			)
			this.tikuList = res.items
			this.pageInfo.count = res.counts
			// console.log(this.tikuList)
		},
		// 选择器数据列表获取
		async questionAxios() {
			// console.log(this.tikuAxios)
			this.pageInfo.page = 1
			this.questionList()
		},
		//页码发生改变时触发
		handleCurrentChange(newCurr) {
			this.pageInfo.page = newCurr
			this.questionList()
		},
		// 分页发生改变时触发
		handleSizeChange(newSize) {
			this.pageInfo.defaultPageSize = newSize
			this.questionList()
		},
		// 确认了删除操作
		async ok() {
			const { data: res } = await this.$http.questionsIdDel(this.delId)
			if (res.success == true) {
				this.$Message.success('删除成功！')
				this.questionList()
			}
		},
		// 取消了删除操作
		cancel() {
			this.$Message.info('已取消删除！')
		},
		async preview(id, index) {
			this.topicPreview = true
			const { data: res } = await this.$http.getQuestionDetails(id)
			// 给详情传递一个它在表格中的序号，方便在详情里渲染审核状况
			const tmp = this.computeTikuList[index]
			this.questionInfo = res
			// 如果赋值一个复杂数据类型，且你需要里面的值，当复杂数据为unfinded的时候，取不到值还会报错。
			this.questionInfo.chkName = tmp.chk.chkName
			this.questionInfo.chkColor = tmp.chk.chkColor
		},
		clearPre() {
			this.questionInfo = {}
		},
		// 提交审核
		subChk() {
			console.log(this.chkForm)
			this.$refs.chkFormRef.validate(async val => {
				if (!val) return this.$Message.error('请填写审核意见')
				const { data: res } = await this.$http.questState(this.chkForm)
				if (!res.success) return
				this.$Message.success('审核成功')
				this.questionList()
				this.isChk = false
			})
		},

		cancelChk() {
			this.$refs.chkFormRef.resetFields()
			this.isChk = false
		},
		// 关闭和取消审核
		modalChange(val) {
			if (!val) this.$refs.chkFormRef.resetFields()
		},
		write() {
			console.log(this.chkForm)
		}
	}
}
</script>

<style lang="less" scoped>
.btn-group .ivu-btn {
	margin-right: 8px;
}

.biaoqian {
	height: 30px;
	padding: 0 20px 0 10px;
	display: inline-block;
	border: 1px solid #ccc;
}

.ivu-tag {
	margin: 0;
	border: none !important;
}

.droBox {
	display: inline-block;
	margin: 0 10px 10px 0;
}

#question {
	font-size: 14px;
}
</style>
